import React, { memo } from "react";
import type { FC, ReactNode } from "react";
import { MyPageWrapper } from "./style";
import { useAppSelector } from "@/store";
import { shallowEqual } from "react-redux";
import AreaItemv1 from "@/components/area-itemv1";

interface IProps {
  children?: ReactNode;
}

const MyPage: FC<IProps> = () => {
  const { mvList } = useAppSelector((state) => ({
    mvList: state.musicLibrary.mvList
  }), shallowEqual)

  return <MyPageWrapper>
    {
      mvList.map(item => (
        <AreaItemv1 key={item.vid} itemDate={item} urlwidth={400} navigatePath="/mv" />
      ))
    }
  </MyPageWrapper>;
};

export default memo(MyPage);